<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01下拉菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav_wrap {
            background: rgb(235, 98, 116);
        }

        .nav {
            width: 1200px;
            height: 30px;
            margin: 0 auto;
        }
        .nav .nav_list {
            width: 90px;
            float: left;
            text-align: center;
            margin: 0 5px;
            color:white;
            font-weight: 900;
            line-height: 30px;
            position: relative;
        }
        .sanjiao{
            display: inline-block;
            width: 0;
            height: 0;
            border-top: 5px solid white;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 5px solid transparent;
            vertical-align: middle;
            margin-left: 5px;
        }
        .nav_list:hover{
            background: rgb(255,126,166);
        }
        .nav_list ul{
            width: 90px;
            position: absolute;
            background: rgb(255,126,166);
            display: none;
        }
        .nav_list ul li{
            border-top:1px solid white; 
        }
        .nav_list ul li:hover{
            background: rgb(246,50,110);
        }
        /* .xiala:hover ul{
            display: block;
        } */
    </style>
    <script src="../jquery.js"></script>
</head>

<body bgcolor="pink">
    <!-- <div class="box"></div> -->
    <div class="nav_wrap">
        <ul class="nav">
            <li class="nav_list">首页</li>
            <li class="nav_list">新品</li>
            <li class="nav_list">秋装聚会</li>
            <li class="nav_list xiala">周二上新<span class="sanjiao"></span>
                <ul>
                    <li class="menu">9月9号</li>
                    <li class="menu">9月16号</li>
                    <li class="menu">9月2号</li>
                    <li class="menu">8月21号</li>
                </ul>
            </li>
            <li class="nav_list xiala">外套<span class="sanjiao"></span>
                <ul>
                    <li class="menu">风衣</li>
                    <li class="menu">马甲</li>
                    <li class="menu">小西装</li>
                    <li class="menu">春秋套装</li>
                    <li class="menu">短款套装</li>
                </ul>
            </li>
            <li class="nav_list xiala">上装<span class="sanjiao"></span>
                <ul>
                    <li class="menu">T恤</li>
                    <li class="menu">雪纺衣</li>
                    <li class="menu">套装</li>
                    <li class="menu">衬衫</li>
                </ul>
            </li>
            <li class="nav_list xiala">裙装<span class="sanjiao"></span>
                <ul>
                    <li class="menu">连衣裙</li>
                    <li class="menu">半身裙</li>
                </ul>
            </li>
            <li class="nav_list xiala">裤装<span class="sanjiao"></span>
                <ul>
                    <li class="menu">牛仔裤</li>
                    <li class="menu">长裤</li>
                    <li class="menu">短裤</li>
                    <li class="menu">连体裤</li>
                </ul>
            </li>
            <li class="nav_list">针织衫</li>
            <li class="nav_list">毛衣</li>
            <li class="nav_list xiala">风格<span class="sanjiao"></span>
                <ul>
                    <li class="menu">休闲</li>
                    <li class="menu">职场</li>
                    <li class="menu">学院</li>
                </ul>
            </li>
            <li class="nav_list xiala">其它<span class="sanjiao"></span>
                <ul>
                    <li class="menu">春夏新款</li>
                    <li class="menu">特价区</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
<script>
    $(function () {
        $(".xiala").hover(function(){
            $(this).find("ul").stop().slideDown(500);
        },function(){
            $(this).find("ul").stop().slideUp(100);
        })
    })
</script>

</html>